<template>
    <div class="drawer-body">
        <div class="drawer-body-roll">
            <div style="padding-bottom: 10px" v-if="bpmTask!=null">
                {{ i18n('list.currNode', '当前节点') }}：{{ $i18(bpmTask.name,"当前节点") }}
            </div>
            <div class="drawer-centent">
                <div class="rxContent">
                    <a-steps direction="vertical" size="small"
                             :current="checkHistorys.length+checkHistorysUnhand.length-1"
                    >
                      <template v-for="item in checkHistorys">
                        <a-step v-if="item.checkStatus!='UNHAND'">
                            <template #title>
                              <div>
                                <div class="node-title">
                                  <div class="user-name">{{item.nodeName}}</div>
                                  <div class="node-state" :class="[item.jumpType]">{{ item.jumpTypeName }}</div>
                                </div>
                              </div>
                            </template>
                            <template #description>
                              <span>
                                <div class="description-head">
                                    <div class="description-head-portrait">
                                    <img src="@/assets/img/portrait.png" /></div>
                                    <div class="description-head-user"><rx-user-info :userId="item.ownerId"/></div>
                                </div>
                                <div v-if="item.jumpType=='TRANSFER' && item.transferorName"
                                     class="description-common">
                                    {{ item.jumpTypeName }}{{ i18n('list.given', '给了') }}{{ item.transferorName }}
                                </div>
                                <div v-if="item.jumpType=='LINKUP'" class="description-common">
                                     <div>{{ i18n('list.communTo', '沟通给:') }}</div><div><rx-user-component
                                    :readonly="true" v-model="item.linkUpUsers"></rx-user-component></div>
                                </div>
                                <div class="description-common">
                                    <div>{{i18n('list.startTime','开始时间')}}:</div>
                                    <div>{{item.createTime }}</div>
                                </div>
                                <div class="description-common">
                                    <div>{{i18n('list.endTime','结束时间')}}:</div>
                                    <div>{{item.completeTime}}</div>
                                </div>
                                <div class="description-common">
                                    <div>{{ i18n('list.approOpi', '审批意见') }}:</div>
                                    <div v-if="item.templateOpinion!=''" v-html="item.templateOpinion"></div>
                                    <div v-else>{{ i18n('nothing', '无') }}</div>
                                </div>
                                <div class="description-common" v-if="getRelInsts(item).length>0">
                                    <div>{{ i18n('list.assoProcess', '关联流程') }}:</div>
                                    <div style="flex: 1">
                                         <div style="width: 100%" v-for="flow in getRelInsts(item)">
                                         <a @click="showInst(flow.id,flow.name)">{{ flow.name }}</a>
                                         </div>
                                    </div>
                                </div>
                               <div v-if="item.opFiles && item.opFiles.length>0"
                                    class="description-common">{{ i18n('list.attachList', '附件列表') }}：</div>
                               <div class="description-common-accessory"
                                    v-if="item.opFiles && item.opFiles.length>0"
                                    v-for="(subItem,index) in item.opFiles">
                                   <div class="iconBox description-iconBox" :class="rxClass(subItem)"></div>
                                   <div style="flex: 1">
                                       <div class="description-common-accessory-con">{{ subItem.fileName }}</div>
                                       <div class="description-common-accessory-user">
                                           <div>
                                               <my-icon type="iconuser-account-bussiness"></my-icon>
                                               {{ item.handlerUserName }}
                                           </div>
                                           <div><my-icon type="icontime"></my-icon>{{ subItem.createTime }}</div>
                                       </div>
                                   </div>
                                   <div class="description-common-download">
                                        <my-icon type="iconcloud-download" @click="donwload(subItem)"></my-icon>
                                   </div>
                               </div>
                            </span>
                            </template>
                        </a-step>
                      </template>
                      <template v-for="item in checkHistorysUnhand">
                        <a-step>
                          <!--获取下一个流程节点-->
                          <template #title>
                            <div>
                              <div class="node-title">
                                <div class="user-name">{{item.nodeName}}</div>
                                <div class="node-state description-unhand">{{ i18n('list.currNode', '当前节点') }}</div>
                              </div>
                            </div>
                          </template>
                          <template #description>
                              <span>
                                    <div class="user-row">
                                        <div class="description-head" v-for="obj_ in item.taskExecutors">
                                            <div class="description-head-portrait">
                                                <img src="@/assets/img/portrait.png" />
                                            </div>
                                            <div class="description-head-user">{{ obj_.name }}</div>
                                        </div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.startTime','创建时间')}}:</div>
                                        <div>{{item.createTime.split('~')[0]}}</div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.endTime','处理时间')}}:</div>
                                        <div>{{item.createTime.split('~')[1] || '~'}}</div>
                                    </div>
                                    <div style="margin-top: 25px" v-if="item.child" v-for="obj in item.child">
                                       <div class="description-head" style="margin-top: -17px">
                                        <div class="description-head-portrait"><img
                                            src="@/assets/img/portrait.png" /></div>
                                            <div class="description-head-user" v-for="obj_ in obj.taskExecutors">
                                              {{ obj_.name }}
                                            </div>
                                        </div>
                                        <div class="description-common">
                                            <div>{{i18n('list.startTime','开始时间')}}:</div>
                                            <div>{{item.createTime.split('~')[0]}}</div>
                                        </div>
                                        <div class="description-common">
                                            <div>{{i18n('list.endTime','结束时间')}}:</div>
                                            <div>{{item.createTime.split('~')[1] || '~'}}</div>
                                        </div>
                                  </div>
                              </span>
                          </template>
                        </a-step>
                      </template>
                    </a-steps>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FlowUtil from "../js/FlowUtil.js";
import {RxUserComponent, RxUserInfo} from "@lowcode/jpaas-share-component";
import BpmCheckHistoryApi from "@/common/api/bpm/bpmCheckHistory";
import useMain from "@/stores/useMain";
import { mapState } from 'pinia'
import {TokenUtil} from "@lowcode/jpaas-base-lib"

export default {
    name: "bpmHistory",
    emits:['update:historyShow'],
    computed: {
      ...mapState(useMain, ['appKey']),
    },
    props: {
        instId: {type: String},
        bpmTask: {type: Object, required: false},
        historyShow: {type: Boolean, default: false},

        layerid: String,
        destroy: {
            type: Function
        }
    },
    mixins: [FlowUtil],
    components: {
        RxUserComponent,
        RxUserInfo
    },
    data() {
        return {
            checkHistorys: [],
            extMapping: {
                ".doc": "wordBox",
                ".docx": "wordBox",
                ".xls": "excelBox",
                ".xlsx": "excelBox",
                ".txt": "txtBox",
                ".pdf": "pdfBox",
                ".rar": "rarBox",
                ".zip": "zipBox",
            },
            checkHistorysUnhand: [],
        }
    },
    created() {
        this.loadCheckHistory();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmInst", key);
        },
        rxClass(item) {//根据文件名  添加类名；
            var name = item.fileName;
            for (var key in this.extMapping) {
                if (name.indexOf(key) > -1) {
                    return this.extMapping[key];
                }
            }
            return "attachBox";
        },
        getRelInsts(his) {
            if (!his.relInsts) {
                return [];
            }
            return JSON.parse(his.relInsts);
        },
        donwload(file) {//下载附件
            var accessToken = TokenUtil.getToken();
            const url = '/api/api-system/system/core/sysFile/download/' + file.fileId + '?accessToken=' + accessToken;
            window.open(url);
        },
        onCheckHistory() {
            this.$emit('update:historyShow', false)
        },
        loadCheckHistory() {
            BpmCheckHistoryApi.getCheckHistorys(this.instId).then(his => {
                this.checkHistorys = his;
                //判断下一个节点构造数据
                this.loadUnhand()
            });
        },
        loadUnhand() {

            var listData = [];
            this.checkHistorys = this.checkHistorys.filter(res => {
                if (res.checkStatus != "UNHAND") {
                    return true
                } else {
                    listData.push(res)
                }
            })

            if(this.checkHistorys && this.checkHistorys.length > 0) {
                // 如果最后一个节点为挂起，后续不出当前节点
                if (this.checkHistorys[this.checkHistorys.length - 1].jumpType === 'PENDING') {
                    return;
                }
            }

            let newArr = []
            let teamArr = []
            for (let i = 0; i < listData.length; i++) {
                if (!teamArr.includes(listData[i]['actTaskId'])) {
                    newArr.push(listData[i])
                    teamArr.push(listData[i]['actTaskId'])
                } else {
                    for (let n = 0; n < newArr.length; n++) {
                        if (newArr[n]['actTaskId'] == listData[i]['actTaskId']) {
                            if (newArr[n].child) {
                                newArr[n].child.push(listData[i])
                            } else {
                                var a = [];
                                a.push(listData[i]);
                                newArr[n]['child'] = a;
                            }
                            break
                        }
                    }
                }
            }
            this.checkHistorysUnhand = newArr;
        },
        showInst(id, name) {
            var self = this;
            this.encryptInstIds(id, true, function (resultList) {
                let grant = resultList[0].grant;
                if (!grant) {
                    return;
                }
                let encInstId = resultList[0].encInstId;
                let obj = self.$router.resolve({
                    name: 'openDoc',
                    params: {instId: encInstId.instId,appKey:self.appKey},
                    query:{appId:encInstId.appId}
                });
                window.open(obj.href + '?action=detail', "_blank");
            })
        }
    },
    watch: {
        historyShow: function (val) {
            if (val) {
                this.loadCheckHistory();
            }
        }
    }
}
</script>

<style scoped>
.drawer-body-roll >>> .ant-steps-item-title{
    width: 100%;
}
.node-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-name{
    font-weight: bold;
    color: #333;
}
.description-unhand {
    padding: 0 6px;
    min-width: 70px;
    height: 22px;
    border-radius: 2px;
    border: solid 1px #6683ef;
    font-size: 12px;
    color: #6683ef;
    text-align: center;
    line-height: 22px;
}

.description-common-accessory {
    display: flex;
    align-content: center;
    border-bottom: 1px dashed #d9d9d9;
    padding-bottom: 10px;
    margin-top: 5px;
}
.description-common-download {
    margin-left: 20px;
    color: #46494d;
    font-size: 20px;
}

.description-iconBox {
    margin-right: 9px;
    margin-top: 5px;
}

.description-common-accessory-con {
    font-size: 12px;
    color: #303030;
}

.description-common-accessory-user {
    display: flex;
    color: #303030;
    font-size: 12px;
}


.description-common {
    display: flex;
    font-size: 12px;
    color: #303030;
    line-height: 20px;
}
.description-common div:nth-child(1) {
    margin-right: 5px;
}
.ant-steps-vertical.ant-steps-small .ant-steps-item-container .ant-steps-item-tail {
    z-index: -1;
}

.drawer-body{
    flex: 1;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.user-row{
    display: flex;
    align-items: center;
    flex-flow: wrap;
    padding:6px 0 10px;
    margin-left: -6px;
}
.description-head{
    margin: 0;
    padding: 6px 0;
    display: flex;
    align-items: center;
}
.user-row .description-head {
    display: flex;
    align-content: center;
    padding: 4px 6px;
    margin: 0;
}
.description-head-portrait {
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-right: 3px;
}
img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}


.description-head-user {
    font-size: 12px;
    color: #46494d;
    margin-top: 2px;
    flex: 1;
}

.description-head-jumpTypeName {
    flex: 1;
    text-align: center;
    font-size: 12px;
    margin-top: 2px;
}


.opDesp {
    font-size: 12px;
    line-height: 32px;
    color: blue;
    width: 100%;
}

.time {
    font-size: 10px;
    color: darkgray;

    width: 100%;
    line-height: 26px;
}

.AGREE {
    font-weight: bold;
    color: green;
}

.BACK, .BACK_SPEC, .BACK_TO_STARTOR {
    font-weight: bold;
    color: red;
}

.SKIP {
    color: red;
}
.node-state{
    font-weight: bold;
}
</style>
